<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item label="信息ID" name="id">
      <a-input v-model:value="formState.id" disabled />
    </a-form-item>
    <a-form-item label="设备名" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item label="设备编码" name="code">
      <a-input v-model:value="formState.code" />
    </a-form-item>
    <a-form-item label="类型" name="type">
      <a-select v-model:value="formState.type" placeholder="请选择类型">
        <a-select-option
          v-for="item in DeviceDataTypeList"
          :value="item"
          :key="item"
          >{{ item }}</a-select-option
        >
      </a-select>
    </a-form-item>
    <a-form-item label="部门" name="department">
      <a-select v-model:value="formState.department" placeholder="请选择部门">
        <a-select-option
          v-for="item in DeviceDepartmentList"
          :value="item"
          :key="item"
          >{{ item }}</a-select-option
        >
      </a-select>
    </a-form-item>
    <a-form-item label="设备品牌" name="label">
      <a-input v-model:value="formState.label" />
    </a-form-item>
    <a-form-item label="设备型号" name="model">
      <a-input v-model:value="formState.model" />
    </a-form-item>
    <a-form-item label="序列号" name="serialNumber">
      <a-input v-model:value="formState.serialNumber" />
    </a-form-item>
    <a-form-item label="唯一标记码" name="sn">
      <a-input v-model:value="formState.sn" :disabled="true" />
    </a-form-item>
    <div>
      <a-form-item label="入库时间" name="storageTime">
        <a-date-picker
          v-model:value="storageTime"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="设备登记时间" name="registrationTime">
        <a-date-picker
          v-model:value="registrationTime"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </a-form-item>
    </div>

    <a-form-item label="状态" name="status">
      <a-select v-model:value="formState.status" placeholder="请选择状态">
        <a-select-option
          v-for="item in DeviceDataStatusList"
          :value="item"
          :key="item"
          >{{ item }}</a-select-option
        >
      </a-select>
    </a-form-item>
    <div class="flex justify-end">
      <a-button type="primary" @click="generate" class="mr-4"
        >自动生成</a-button
      >
      <DeleteDataConfirm :id="data.id" />
    </div>
  </a-form>
</template>
<script lang="ts">
import { DeviceDataStatusList, DeviceDataTypeList } from "@/@types/device/enum";
import { DeviceDepartmentList } from "@/@types/enum";
import { deviceDataItem } from "@/api/mock/data";
import { updateDeviceData } from "@/controller/Data";
import { DeviceData } from "device";
import moment, { Moment } from "moment";
import {
  defineComponent,
  reactive,
  ref,
  toRaw,
  UnwrapRef,
  PropType,
  watchEffect,
} from "vue";
import DeleteDataConfirm from "../confirm/DeleteDataConfirm.vue";
import message from "ant-design-vue/es/message";
export default defineComponent({
  name: "DeviceDataForm",
  components: {
    DeleteDataConfirm,
  },
  props: {
    data: {
      type: Object as PropType<DeviceData>,
      required: true,
    },
  },
  setup(props) {
    const formRef = ref();
    const formState: UnwrapRef<DeviceData> = reactive({
      id: props.data.id,
      name: props.data.name,
      code: props.data.code,
      type: props.data.type,
      department: props.data.department,
      label: props.data.label,
      model: props.data.model,
      serialNumber: props.data.serialNumber,
      sn: props.data.sn,
      storageTime: props.data.storageTime,
      registrationTime: props.data.registrationTime,
      status: props.data.status,
    });
    const storageTime = ref<Moment>(moment(props.data.storageTime));
    const registrationTime = ref<Moment>(moment(props.data.registrationTime));
    watchEffect(() => {
      formState.storageTime = storageTime.value.valueOf();
    });
    watchEffect(() => {
      formState.registrationTime = registrationTime.value.valueOf();
    });

    const generate = () => {
      Object.assign(formState, deviceDataItem());
      storageTime.value = moment(formState.storageTime);
      registrationTime.value = moment(formState.registrationTime);
    };
    const rules = {
      name: [
        {
          required: true,
          message: "请输入设备名",
          trigger: "blur",
        },
      ],
      type: [
        {
          required: true,
          message: "请输入设备数据类型",
          trigger: "blur",
        },
      ],
      department: [
        {
          required: true,
          message: "请输入设备部门",
          trigger: "blur",
        },
      ],
      label: [
        {
          required: true,
          message: "请输入设备品牌",
          trigger: "blur",
        },
      ],
      sn: [
        {
          required: true,
          message: "请输入设备唯一标示码",
          trigger: "blur",
        },
      ],
    };
    const onSubmit = async (): Promise<boolean> => {
      return await formRef.value
        .validate()
        .then(async () => {
          await updateDeviceData(toRaw(formState));
          message.success("成功修改设备数据");
          return true;
        })
        .catch(() => {
          return false;
        });
    };
    return {
      formRef,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      formState,
      rules,
      onSubmit,
      storageTime,
      registrationTime,
      generate,
      DeviceDataTypeList,
      DeviceDepartmentList,
      DeviceDataStatusList,
    };
  },
});
</script>
